<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, initial-scale=1, shrink-to-fit=no">
    <div th:replace="~{admin/common :: common-link}"></div>
    <style>
        span {
            display: inline-block;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            max-width: 500px;
        }
        img {
            box-shadow: 0 1px 20px 8px #EEE;
        }
        p {
            padding-bottom: 1rem;
        }
    </style>
</head>
<body>

<div class="content">
    <div class="block block-fx-shadow">
        <div class="block-content">
            <form id="saveForm" method="post" th:object="${vo}">
                <div class="row justify-content-center py-20">
                    <div class="col-md-4">
                        <div class="form-group row">
                            <div class="col-md-12">
                                <p>预览图:</p>
                                <img th:src="@{*{coverUrl}}" width="400" height="350" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-7 offset-1">
                        <div class="block block-fx-shadow">
                            <ul class="nav nav-tabs nav-tabs-block" data-toggle="tabs" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" href="#baseArea">基础信息</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#pageArea">页面配置</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#layoutArea">布局设置</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#commentArea">评论设置</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#resourceArea">资源设置</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#otherArea">其他设置</a>
                                </li>
                            </ul>
                            <div class="block-content tab-content overflow-hidden">
                                <div class="tab-pane fade fade-left show active" id="baseArea" role="tabpanel">
                                    <div class="form-group row">
                                        <div class="col-md-3">主题名</div>
                                        <div class="col-md-9">
                                            <span id="filename" th:text="*{name}"></span>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-md-3">备注</div>
                                        <div class="col-md-9">
                                            <span id="filePath" th:text="*{remark}"></span>
                                        </div>
                                    </div>
                                    <form class="js-validation-be-contact" id="baseForm" method="post">
                                        <div class="row justify-content-center" th:each="config : ${baseList}">
                                            <div class="col-lg-12 col-xl-12">
                                                <div class="form-group row">
                                                    <label class="col-lg-3 col-form-label" th:text="${config.configLabel}"></label>
                                                    <div class="col-lg-7" th:if="${config.configType eq 'input'}">
                                                        <input type="text" name="configValue" class="form-control" style="width: 300px;" th:value="${config.configValue}" th:data-id="${config.id}" readonly>
                                                    </div>
                                                    <div class="col-lg-7" th:if="${config.configType eq 'select'}">
                                                        <span th:if="${#strings.isEmpty(config.configOption) == false}">
                                                            <select name="configValue" class="form-control theme-config" style="width: 300px;" th:data-id="${config.id}" readonly>
                                                                <option th:each="op : ${#strings.arraySplit(config.configOption, ',')}" th:text="${op}" th:value="${op}" th:attr="selected=${op eq config.configValue}"></option>
                                                            </select>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="tab-pane fade fade-left show" id="pageArea" role="tabpanel">
                                    <form class="js-validation-be-contact" id="pageForm" method="post">
                                        <div class="row justify-content-center" th:each="config : ${pageList}">
                                            <div class="col-lg-12 col-xl-12">
                                                <div class="form-group row">
                                                    <label class="col-lg-3 col-form-label" th:text="${config.configLabel}"></label>
                                                    <div class="col-lg-7" th:if="${config.configType eq 'input'}">
                                                        <input type="text" name="configValue" class="form-control theme-config" style="width: 300px;" th:value="${config.configValue}" th:data-id="${config.id}">
                                                    </div>
                                                    <div class="col-lg-7" th:if="${config.configType eq 'select'}">
                                                        <span th:if="${#strings.isEmpty(config.configOption) == false}">
                                                            <select name="configValue" class="form-control theme-config" style="width: 300px;" th:data-id="${config.id}">
                                                                <option th:each="op : ${#strings.arraySplit(config.configOption, ',')}" th:text="${op}" th:value="${op}" th:attr="selected=${op eq config.configValue}"></option>
                                                            </select>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="tab-pane fade fade-left show" id="layoutArea" role="tabpanel">
                                    <form class="js-validation-be-contact" id="layoutForm" method="post">
                                        <div class="row justify-content-center" th:each="config : ${layoutList}">
                                            <div class="col-lg-12 col-xl-12">
                                                <div class="form-group row">
                                                    <label class="col-lg-3 col-form-label" th:text="${config.configLabel}"></label>
                                                    <div class="col-lg-7" th:if="${config.configType eq 'input'}">
                                                        <input type="text" name="configValue" class="form-control theme-config" style="width: 300px;" th:value="${config.configValue}" th:data-id="${config.id}">
                                                    </div>
                                                    <div class="col-lg-7" th:if="${config.configType eq 'select'}">
                                                        <span th:if="${#strings.isEmpty(config.configOption) == false}">
                                                            <select name="configValue" class="form-control theme-config" style="width: 300px;" th:data-id="${config.id}">
                                                                <option th:each="op : ${#strings.arraySplit(config.configOption, ',')}" th:text="${op}" th:value="${op}" th:attr="selected=${op eq config.configValue}"></option>
                                                            </select>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="tab-pane fade fade-left show" id="commentArea" role="tabpanel">
                                    <form class="js-validation-be-contact" id="commentForm" method="post">
                                        <div class="row justify-content-center" th:each="config : ${commentList}">
                                            <div class="col-lg-12 col-xl-12">
                                                <div class="form-group row">
                                                    <label class="col-lg-3 col-form-label" th:text="${config.configLabel}"></label>
                                                    <div class="col-lg-7" th:if="${config.configType eq 'input'}">
                                                        <input type="text" name="configValue" class="form-control theme-config" style="width: 300px;" th:value="${config.configValue}" th:data-id="${config.id}">
                                                    </div>
                                                    <div class="col-lg-7" th:if="${config.configType eq 'select'}">
                                                        <span th:if="${#strings.isEmpty(config.configOption) == false}">
                                                            <select name="configValue" class="form-control theme-config" style="width: 300px;" th:data-id="${config.id}">
                                                                <option th:each="op : ${#strings.arraySplit(config.configOption, ',')}" th:text="${op}" th:value="${op}" th:attr="selected=${op eq config.configValue}"></option>
                                                            </select>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="tab-pane fade fade-left show" id="resourceArea" role="tabpanel">
                                    <form class="js-validation-be-contact" id="resourceForm" method="post">
                                        <div class="row justify-content-center" th:each="config : ${resourceList}">
                                            <div class="col-lg-12 col-xl-12">
                                                <div class="form-group row">
                                                    <label class="col-lg-3 col-form-label" th:text="${config.configLabel}"></label>
                                                    <div class="col-lg-7" th:if="${config.configType eq 'input'}">
                                                        <input type="text" name="configValue" class="form-control theme-config" style="width: 300px;" th:value="${config.configValue}" th:data-id="${config.id}">
                                                    </div>
                                                    <div class="col-lg-7" th:if="${config.configType eq 'select'}">
                                                        <span th:if="${#strings.isEmpty(config.configOption) == false}">
                                                            <select name="configValue" class="form-control theme-config" style="width: 300px;" th:data-id="${config.id}">
                                                                <option th:each="op : ${#strings.arraySplit(config.configOption, ',')}" th:text="${op}" th:value="${op}" th:attr="selected=${op eq config.configValue}"></option>
                                                            </select>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <div class="col-lg-12 col-xl-12">
                                                <b>友情提示：</b>
                                                <b><br>
                                                    ① 可浏览 <a href="https://www.extlight.com/2021/01/20/%E8%BD%BB%E6%9D%BE%E6%90%AD%E5%BB%BA%E4%B8%93%E5%B1%9E-CDN/" target="_blank">《轻松搭建专属 CDN》</a> 自行搭建 CDN <br>
                                                    ② 如要自行搭建 CDN ，目录结构可参照 <a href="https://github.com/moonlightL/vCard" target="_blank">vCard 仓库</a>，其 CDN 访问地址为 https://cdn.jsdelivr.net/gh/moonlightL/vCard@2.0
                                                </b>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="tab-pane fade fade-left show" id="otherArea" role="tabpanel">
                                    <form class="js-validation-be-contact" id="otherForm" method="post">
                                        <div class="row justify-content-center" th:each="config : ${otherList}">
                                            <div class="col-lg-12 col-xl-12">
                                                <div class="form-group row">
                                                    <label class="col-lg-3 col-form-label" th:text="${config.configLabel}"></label>
                                                    <div class="col-lg-7" th:if="${config.configType eq 'input'}">
                                                        <input type="text" name="configValue" class="form-control theme-config" style="width: 300px;" th:value="${config.configValue}" th:data-id="${config.id}">
                                                    </div>
                                                    <div class="col-lg-7" th:if="${config.configType eq 'select'}">
                                                        <span th:if="${#strings.isEmpty(config.configOption) == false}">
                                                            <select name="configValue" class="form-control theme-config" style="width: 300px;" th:data-id="${config.id}">
                                                                <option th:each="op : ${#strings.arraySplit(config.configOption, ',')}" th:text="${op}" th:value="${op}" th:attr="selected=${op eq config.configValue}"></option>
                                                            </select>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <button type="button" class="btn btn-alt-primary pull-right" id="submitBtn" >
                                <i class="fa fa-send mr-5"></i> 保存
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div th:replace="~{admin/common :: common-script}"></div>
<script type="text/javascript" th:inline="javascript">
    $(function () {
        $("#submitBtn").on("click", function () {

            let length = $(".theme-config").length;
            if (length === 0) {
                window.parent.$.hexo.modal.close();
            }

            let parameter = [];
            $(".theme-config").each(function (index, domEle) {
                let $target = $(domEle);
                let id = $target.data("id");
                let val = $target.val();
                parameter.push({"id": id, "configValue": val});
            });

            $.ajax({
                type: "POST",
                url: BASE_URL + "/saveConfig.json",
                data: JSON.stringify(parameter),
                dataType: "JSON",
                contentType: 'application/json;charset=UTF-8',
                success: function (resp) {
                    $.hexo.modal.tip("保存成功", "success", function () {
                        window.parent.$.hexo.modal.close();
                    });
                }
            })
        });
    });
</script>
</body>
</html>